<template>
  <div class="container">
    <div class="video-container">
      <!-- Four img tags to display the video streams -->
      <img class="video-stream" :src="videoSrc2" style="float: left;" @click="handleVideoClick($event)" />
      <div v-for="position in clickPositions" class="dot" :style="{ top: position.y + 'px', left: position.x + 'px' }"></div>
    </div>
    <div class="controls">
      <button class="camera-btn" @click="toggleCameraSelection">
        选择摄像头
      </button>
      <select v-if="showCameraSelection" v-model="selectedCamera">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>
      <button v-if="showCameraSelection" class="submit-btn" @click="submitCameraSelection">提交</button>
      <button class="submit-atea-btn" @click="submitIntrusionArea">提交新的入侵区域</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import { invadeCommitClick } from "@/api/video";
import { addWhiteList } from "@/api/InforManage";
import {
  monitor_close_click,
  register_close_click,
  track_close_click,
  recognize_close_click,
  invade_close_click
} from "@/api/close";
import { globalVariable } from '../../store/modules/globalurl'
import {ElMessage} from "element-plus";

/**
 * 钩子函数实时调用
 */
onMounted(() => {
  close(); // 调用你的函数
});
async function close() {
  try {
    const responses = await Promise.all([
      register_close_click(),
      invade_close_click(),
      track_close_click(),
      monitor_close_click()
    ]);
    // Handle success for all requests
    responses.forEach(response => {
      var res = response.data;
      if (res.respCode !== '000000') {
        ElMessage.error(res.respMsg);
      }
    });
  } catch (error) {
    console.error(error);
    ElMessage.error('关闭失败，请重试');
  }
}//----------------------初始视频流-----------------------------
//----------------------初始视频流-----------------------------
const videoSrc2 = ref(globalVariable+'/api/video_invade/1');

const showCameraSelection = ref(false);
const selectedCamera = ref('');
const clickPositions = ref([]);

function toggleCameraSelection() {
  showCameraSelection.value = !showCameraSelection.value;
  selectedCamera.value = '';
}

function submitCameraSelection() {

  let selectedCameraValue = selectedCamera.value; // 从 <select> 元素中获取选中的值

  if (selectedCameraValue === '1') {
    videoSrc2.value = globalVariable+'/api/video_invade/1';
    showCameraSelection.value = false;
    selectedCamera.value = '';
  } else if(selectedCameraValue === '2'){
    videoSrc2.value = globalVariable+'/api/video_invade/2';
    showCameraSelection.value = false;
    selectedCamera.value = '';
  } else if(selectedCameraValue === '3'){
    videoSrc2.value = globalVariable+'/api/video_invade/3';
    showCameraSelection.value = false;
    selectedCamera.value = '';
  } else if(selectedCameraValue === '4'){
    videoSrc2.value = globalVariable+'/api/video_invade/4';
    showCameraSelection.value = false;
    selectedCamera.value = '';
  }
}

function handleVideoClick(event) {
  // const position = {
  //   x: event.clientX,
  //   y: event.clientY
  // };
  //使得list为const position = [event.clientX, event.clientY];
  const position = [event.clientX, event.clientY];
  clickPositions.value.push(position);
  console.log("鼠标左键点击位置：", position);
  console.log("当前列表： ",clickPositions.value);

}

/**
 * 提交新的入侵区域函数
 */
function submitIntrusionArea() {
  console.log("提交入侵区域：", clickPositions.value);

  const pointList = clickPositions.value;
  const data = { pointList: pointList };

  invadeCommitClick(data)
      .then((response) => {

        var res = response.data

        if (res.success === true) {
          ElMessage.success('修改入侵区域成功');
          // router.push('/');
        }
        else {
          ElMessage.error(res.respMsg);
        }//else

      })//then
      .catch((error) => {
        console.error(error);
        ElMessage.error('修改入侵区域失败，请重试');
      });//catch
  clickPositions.value = [];
}
</script>

<style scoped>
.refresh-btn {
  float: right;
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.camera-btn {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 10px;
}

.submit-btn {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

.controls {
  display: flex;
  flex-direction: column;
}

.video-container {
  width: 50%;
}

.video-stream {
  width: 100%;
}
</style>